<template>
    <div class="mui-content ucenterCar">
        <!--车辆信息-->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell" @click="goCarBrandList()">
                <a class="mui-navigate-right text2">汽车品牌
                    <span class="mui-pull-right color2 mgr1" id="carBrandValue">{{carModel}}</span>
                </a>
            </li>
            <li class="mui-table-view-cell"  @click="changeCarNumber()" id="carNumber">
                <a class="text2 mui-navigate-right">车牌号<span class="mui-pull-right color2 mgr1">{{carPlateNumber}}</span></a>
            </li>
            <li class="mui-table-view-cell"  @click="changePrice()" id="carPrice">
                <a class="text2 mui-navigate-right">车价<span class="mui-pull-right color2 mgr1">{{carBuyPrice|carPriceFilter}}</span></a>
            </li>
            <li class="mui-table-view-cell" @click="datePicker()" id="buyTime"  data-options='{"type":"month","beginYear":2000,"endYear":2017}'>
                <a class="text2 mui-navigate-right">购买时间
                    <span class="mui-pull-right color2 mgr1">{{carBuyDate}}</span>
                </a>
            </li>
        </ul>
        <div class="operateBtn">
            <button class="mui-btn mui-btn-primary" @click="confirm()">确认</button>
        </div>
    </div>
</template>
<style>
    .mui-popup-input input[type='text']{height: 0.8rem; font-size: 0.3rem;}
    .ucenterCar #carNumInput{border: 0; width: 2rem; height: 0.45rem; line-height: 0.45rem;  text-align: left;}
</style>
<script type="text/ecmascript-6">
    import footerNavComponent from '../../components/footer-nav/footer-nav.vue';
    import datePickerComponent from '../../components/date-picker/date-picker.vue';
    import pickerComponent from '../../components/picker/picker.vue';
    import '../../fonts/mui.css';
    import Page from '../../base/Page'
    import { API } from '../../config/constants'
    export default new Page({
    	vuex:{
			actions:{
				updMyCar:function({dispatch},data){
					dispatch('UPD_MY_CAR',data);
				}
			},
			getters:{
				carPlateNumber:function(state){
					return state.mycar.carPlateNumber;
				},
				carBrand:function(state){
					return state.mycar.carBrand;
				},
				carModel:function(state){
                    return state.mycar.carModel;
                },
                carModeldetail:function(state){
                    return state.mycar.carModeldetail;
                },
				carBuyPrice:function(state){
					return state.mycar.carBuyPrice;
				},
				carBuyDate:function(state){
					return state.mycar.carBuyDate;
				},
				carBrandImage:function(state){
					return state.mycar.carBrandImage;
				}
			}
		},
        data(){
	    	return {
	        	myCar:{carBrandImage:'',carPlateNumber:'',carBrand:'',carModel:'',carModeldetail:'',carBuyPrice:'',carBuyDate:''},
	        	priceSelect:[{value: 'P01',text: '10万以内'},{value: 'P02',text: '10万~15万'},{value: 'P03',text: '15万~20万'}]
	        }
        },
        ready () {
            mui.init();
            this.myCar.carPlateNumber = this.carPlateNumber;
            this.myCar.carBrand = this.carBrand;
            this.myCar.carModel = this.carModel ;
            this.myCar.carBuyPrice = this.carBuyPrice;
            this.myCar.carBuyDate = this.carBuyDate;
            this.myCar.carBrandImage = this.carBrandImage;
            this.myCar.carModeldetail = this.carModeldetail;
            //下拉框初始化数据
            this.getJSON(API.GET_DICT_LIST, {key:'CAR_PRICE_RANGE'}, res => {
                this.priceSelect = res.resultData;
                console.log(JSON.stringify(this.priceSelect));
            });
        },
        components:{
            footerNavComponent,
            datePickerComponent,
            pickerComponent
        },
        methods: {
            datePicker: function () {
            	let that = this;
            	(function ($) {
	                $.init();
	                var buyTime= document.getElementById('buyTime');
	                var buyTimeValue = buyTime.getElementsByTagName('span')[0];
	                var optionsJson = buyTime.getAttribute('data-options') || '{}';
	                var options = JSON.parse(optionsJson);
                    var now=new Date();
                    options.endYear=now.getFullYear();
                    options.endMonth=now.getMonth()+1;
                    options.endDay=now.getDate();
	                var id = buyTime.getAttribute('id');
	                var picker = new $.DtPicker(options);
	                picker.show(function (rs) {
	                    buyTimeValue.innerText = rs.text;
	                    //set to data param
	                    that.myCar.carBuyDate = rs.text;
	                    picker.dispose();
	                });
	            })(mui);
            },
            changePrice:function () {
            	let that = this;
                (function($, doc) {
                    $.init();
                    $.ready(function() {
                        //普通示例
                        var userPicker = new $.PopPicker();
                        userPicker.setData(that.priceSelect);
                        var userReason=doc.getElementById('carPrice').getElementsByTagName('span')[0];
                        userPicker.show(function(items) {
                            userReason.innerText = items[0].text;
                            //set to data param
                            that.myCar.carBuyPrice = items[0].value;
                        }, false);
                    });
                })(mui, document);
            },
            changeCarNumber:function () {
            	let that = this;
                var carNumber=mui('#carNumber span')[0];
                var a=carNumber.innerText;
                var input = "<input type='text' id='carNumInput' placeholder='请输入车牌号(如:苏B12345)' value=''/>";
                carNumber.innerHTML=input;
                var carNumInput=document.getElementById('carNumInput');
                carNumInput.addEventListener('tap',function () {
                    return false;
                });
                /*文本框获取焦点*/
                carNumInput.focus();
                carNumInput.addEventListener('blur',function () {
                    var newtxt = carNumInput.value;
                    //判断文本有没有修改
                    if (newtxt != a) {
                        if (newtxt == ''||newtxt ==null){
                            carNumber.innerText=a;
                        }else {
                            carNumber.innerText=newtxt;
                        }
                    }
                    else {
                        carNumber.innerText=a;
                    };
                    //set to data param
                    that.myCar.carPlateNumber = carNumber.innerText;
                })
                //文本框失去焦点后提交内容，重新变为文本

            },
            goCarBrandList(){
                let from = this.$route.params.from;
                if(from == 'ucenter'){
                    this.$route.router.go('/car/brands/ucenter')
                }else if(from == 'BY'){
                    this.$route.router.go('/car/brands/BY')
                }else if(from == 'KQLX'){
                    this.$route.router.go('/car/brands/KQLX')
                }else if(from == 'KTLX'){
                    this.$route.router.go('/car/brands/KTLX')
                }else if(from == 'moreItems'){
                    this.$route.router.go('/car/brands/moreItems')
                }
            },
            confirm:function () {
            	//api update mycar
            	let that = this;
                let from = that.$route.params.from;
                let carNum = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
                let val = this.myCar.carPlateNumber;
                this.post(API.POST_CAR_SAVE, that.myCar, res => {
                    //set to store
	            	this.updMyCar(that.myCar);
                });
                
                //验证myCar对象是否有元素为空，不为空跳转
                var flag = true;
                if(from == 'ucenter'){
                    for(let i in that.myCar){
                        if(that.myCar[i]==null||that.myCar[i]==""){
                            mui.toast('请完善车辆信息');
                            flag=false;
                            return;
                        }else if(!carNum.test(val)){
                            mui.toast('请填写正确车牌号');
                            flag=false;
                            return;
                        }
                    };

                   
                    if(flag){
                        that.$route.router.go('/tip/success/userCarConfirm')
                    }
                }else if(from == 'BY'){
                    for(let i in that.myCar){
                        if(that.myCar[i]==null||that.myCar[i]==""){
                            mui.toast('请完善车辆信息');
                            flag=false;
                            return;
                        }
                    };
                    if(flag){
                        that.$route.router.go('/maintenance/BY')
                    }
                }else if(from == 'KQLX'){
                    for(let i in that.myCar){
                        if(that.myCar[i]==null||that.myCar[i]==""){
                            mui.toast('请完善车辆信息');
                            flag=false;
                            return;
                        }
                    };
                    if(flag){
                        that.$route.router.go('/maintenance/KQLX')
                    }
                }else if(from == 'KTLX'){
                    for(let i in that.myCar){
                        if(that.myCar[i]==null||that.myCar[i]==""){
                            mui.toast('请完善车辆信息');
                            flag=false;
                            return;
                        }
                    };
                    if(flag){
                        that.$route.router.go('/maintenance/KTLX')
                    }
                }else if(from == 'moreItems'){
                    for(let i in that.myCar){
                        if(that.myCar[i]==null||that.myCar[i]==""){
                            mui.toast('请完善车辆信息');
                            flag=false;
                            return;
                        }
                    };
                    if(flag){
                        that.$route.router.go('/maintenance/moreItems')
                    }
                }

            }

        }
    })

</script>
